<style src="@/css/components/table.css"></style>
<style src="@/css/components/button.css"></style>
<style>
.distribute-power {
    background: #fff;
    padding: 30px;
}

.distribute-power .no-border {
    border:none;
}

.distribute-power .test-papers-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    align-items: center;
}

.pages {
    margin-top: 30px;
}

.el-icon-caret-top:before,.el-icon-caret-bottom:before {
    content: ""
}
</style>

<template>
    <section>
        <div class="distribute-power">
            <el-table :data="menuList" style="width: 100%" class="newTab first-table">
                <el-table-column prop="Title" label="权限页面" min-width="20%"></el-table-column>
                <el-table-column label="功能" min-width="80%">
                    <template slot-scope="scope">
                        <el-checkbox-group v-model="scope.row.PIDArr">
                            <el-checkbox v-for="item in permissionList[scope.row.Code]" :label="item.PID" :key="item.PID">{{item.Name}}</el-checkbox>
                        </el-checkbox-group>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="test-papers-header" style="margin-top:20px;">
            <el-button type="primary" class="showdow" @click="sureDistribute">保存</el-button>
        </div>
        <!-- <div>
            <el-row class="plan-main-head">
                <el-col :span="4">权限页面</el-col>
                <el-col :span="20">功能</el-col>
            </el-row>
            <template v-for="one in menuList">
                <el-row class="plan-main">
                    <el-col :span="4" class="page-name">{{one.Title}}</el-col>
                    <el-col :span="20">
                        <el-checkbox-group v-model="one.PIDArr">
                            <el-checkbox v-for="item in permissionList[one.Code]" :label="item.PID" :key="item.PID">{{item.Name}}</el-checkbox>
                        </el-checkbox-group>
                    </el-col>
                </el-row>
            </template>
        </div>
 -->

    </section>

</template>

<script>

import qs from 'qs'

export default{
    data: function(){
        return {
            roleID:this.$route.query.roleID,
            roleName:this.$route.query.roleName,
            menuList:[],
            permissionList:[],
            path:[
                {
                    'name':'设置',
                    'path':'/organization/dept-list'
                },
                {
                    'name':'角色管理',
                    'path':'/organization/role-list'
                },
                {
                    'name':'分配权限'
                }
            ]
        }
    },
    mixins: [mixinMethods],
    methods: {
        sureDistribute(){
            let nowPIDArr = []
            this.menuList.forEach(item=>{
                if(item.PIDArr.length>0){
                    nowPIDArr.push(item.PIDArr.join(','))
                }
            })
            axios.post('/com/role/setPermission', qs.stringify({
                roleID:this.roleID,
                PIDStr:nowPIDArr.join(',')
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.$message.success('分配成功')
                    history.go(-1)
                }else {
                    this.$message.error(d.msg)
                }
            })
        }
    },
    mounted: function(){
        this.$store.commit('setPath', this.path)

        axios.post('/com/role/permissionList', qs.stringify({
            roleID:this.roleID
        })).then((res) => {
            var d = res.data;
            if(d.flag == 1){
                let selectObj = d.data.PermissionSelected;
                d.data.MenuList.forEach(item=>{
                    item.PIDArr = [];
                    if(selectObj[item.Code]){
                        selectObj[item.Code].forEach(one=>{
                            item.PIDArr.push(one.PID)
                        })
                    }
                })
                this.menuList = d.data.MenuList;
                this.permissionList = d.data.PermissionList;
            }else {
                this.$message.error(d.msg)
            }
        })
    }
}


</script>
